<template>
  <div class="list-page-container-root full-container">
    <div class="list-page-header" v-if="pageTitle != ''">
      <!--列表组件title前图标-->
      <img class="list-page-header-title-ico" src="@/assets/images/business/public/main-public-title-ico.png">
      <!--列表组件title容器-->
      <span>{{ pageTitle }}</span>
      <!--列表组件title下方蓝色横线-->
      <img class="list-page-header-title-line" src="@/assets/images/business/public/main-public-title-line.png">
      <!--列表组件title下方橙色横线-->
      <img class="list-page-header-title-orange-line" src="@/assets/images/business/public/orange-line.png">
    </div>
    <div class="query-container">
      <slot name="query"></slot>
    </div>
    <div class="list-page-content">
      <slot name="body"></slot>
    </div>
  </div>
</template>

<script>
export default {
  props: {
    pageTitle: {
      type: String,
      default: '',
    }
  }
}
</script>

<style lang="scss" scoped>
@import "@/assets/styles/businessTheme.scss";

.list-page-container-root {
  display: flex;
  flex-direction: column;

  .list-page-header, .query-container, .list-page-content {
    width: 100%;
    box-sizing: border-box;
  }
   //设置列表组件头部公共样式
  .list-page-header {
    //设置高度，宽度在上方统一设置
    height: 5%;
  }


  .query-container {
    height: max-content;
    padding: 20px 0 0 0;
  }

  .list-page-content {
    flex: 1;
    overflow: hidden;

  }
}
</style>
